<template>
	<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta>
	<view class="worklist-content">
		<u-sticky bgColor="#fff">
			<view class="" style="padding: 20rpx 28rpx;display: flex;background-color: #fff;border-bottom: 1px solid #eee;">
				<view class="" style="flex: 1; margin-right: 28rpx;">
					<u-search placeholder="工单号/姓名/电话/地址" v-model="keyword" height="60" :showAction="false"
						searchIconSize="48" bgColor="#f5f5f5" @search="goSearch" shape="square"></u-search>
				</view>
				<u-icon name="list" size="48" color="#000" @click="openSearch()"></u-icon>
			</view>
			<view class="tabs">
				<u-sticky bgColor="#fff">
					<u-tabs :current="tabIndex" :list="tabs" lineHeight="6rpx" lineColor="#fd7400"
						:inactiveStyle="{color: '#000'}" :activeStyle="{color: '#fd7400'}" @change="changeTab"></u-tabs>
				</u-sticky>
			</view>
			<view class="nav-status u-flex-between">
				<view class="count text-orange">
					<text>当前状态有{{count}}个工单 </text>
				</view>
				<view class="batch">
					<view class="icon-btn" v-if="!isBatch" @click="changeBatch(true)">
						<text style="margin-right: 10rpx">批量 </text>
						<u-icon name="order" color="gray" size="36"></u-icon>
					</view>
					<view class="icon-btn" v-if="isBatch" @click="batchSelectAll(!isSelectAll)">
						<text style="margin-right: 10rpx">全选 </text>
						<u-icon name="close-circle" color="gray" size="36"></u-icon>
					</view>
					<view class="icon-btn" v-if="isBatch" @click="changeBatch(false)">
						<text style="margin-right: 10rpx">取消 </text>
						<u-icon name="close" color="gray" size="36"></u-icon>
					</view>
				</view>
			</view>
		</u-sticky>
		
		
		<scroll-view>
			<view class="card-list">
				<checkbox-group @change="selectCheck">
					<view class="card" v-for="item in workList" :key="item.id">
						<view class="top u-flex-between">
							<view class="left u-flex" @click="goworkdetail(item)">
								<view class="text-info" style="font-weight: 700;">
									<!-- {{item.module}} -->
									{{item.workNo}}
								</view>
							</view>
							<view class="right u-flex">
								<!-- :class="{'cus-oragen-tag':item.status==='已完成','cus-gray-tag':item.status==='已取消'}" -->
								<view style="margin-right: 22rpx;" class="cus-blue-tag">
									{{item.status}}
								</view>
								<!-- :class="{'cus-btn2':item.workAssuranceStatus==='保外','cus-btn':item.workAssuranceStatus==='保内','text-blue':item.workAssuranceStatus==='保内','text-green':item.workAssuranceStatus==='保外'}" -->
								<view class="cus-blue-tag">
									{{item.workAssuranceStatus}}
								</view>
								<checkbox v-show="isBatch" style="margin-left: 22rpx;" borderColor="#fd7400" activeBackgroundColor="#fd7400" color="#fd7400" activeBorderColor="#fd7400" :value="item.id" :checked="isSelectAll"/>
							</view>
						</view>
						<view class="center" @click="goworkdetail(item)">
							<view class="text">
								工单类型：
								<text>{{item.module ? item.module : ''}}</text>
							</view>
							<view class="text">
								创建时间：
								<text>{{item.createDate ? item.createDate : ''}}</text>
							</view>
							<view class="text">
								工单产品：
								<text>{{item.proModel ? item.proModel : ''}}</text>
							</view>
							<view class="text">
								客户信息：
								<text space="emsp">{{item.cuName ? item.cuName : ''}} {{item.cuPhone ? item.cuPhone : ''}}</text>
							</view>
							<view class="text">
								工单地址：
								<text>{{item.cuAddress ? item.cuAddress : ''}}</text>
							</view>
							<view class="text">
								受理网点：
								<text>{{item.netWork ? item.netWork : ''}}</text>
							</view>
						</view>
						<view class="down u-flex-between">
							<view class="text-status">
								<!-- :class="{'status-gray-btn':item.status==='已取消','status-orange-btn':item.status==='待结单','status-gray-btn':item.status==='已完成','status-gray-btn':item.status==='已取消'}" -->
								<view class="status-green-btn">
									{{item.feeStatus}}
								</view>
							</view>
							<view class="right">
								<view class="cus-oragen-btn" @click="getKfList([item.id])" v-if="item.status==='待受理'">
									分派客服
								</view>
								<view class="cus-oragen-btn" v-else-if="item.netWork===null" @click="getWdList([item.id])">
									分派网点
								</view>
								<view class="cus-oragen-tag" v-else>
									{{item.cuService}}
								</view>
							</view>
						</view>
					</view>
				</checkbox-group>
			</view>
			<view class="example-body" :style="{'marginBottom': isBatch ? '80rpx' : '0'}">
				<uni-load-more :status="status" :content-text="contentText"/>
			</view>
			<view class="batch-bars" v-show="isBatch">
				<view class="batch-bars-box u-flex-between">
					<text class="text-orange" space="ensp">{{count}} / {{selectCount}}</text>
					<view class="batch-bars-btn u-flex-between" @click="changeBatchList">
						<text style="margin-right: 10rpx">批量</text>
						<u-icon name="arrow-up-fill" color="#fff" size="32"></u-icon>
					</view>
				</view>
			</view>
			</scroll-view>
			<!-- 侧边栏 -->
			<sidebarpop
				ref="worklist-sidebar"
				ptitle="筛选"
				:isSlot="true"
				:sidebarList="JSON.stringify(sidebarList)"
				@closeclick="closePop"
				@radioClick="radioClick"
				@clearSelect="clearSelect"
				@saveclick="saveSelect"
			>
				<template slot="content" class="pop-content-list">
					<view class="item-box">
						<view class="item-box-title u-flex-between" @click="showDate = true">
							<view>下单日期</view>
							<view style="font-weight: 400;">
								<view class="item-content" >
									<picker mode="date" :value="date.startTime" @change="confirmDate($event,'startTime')" @cancel="confirmDate($event,'startTime')">
										<view class="uni-input">{{data.startTime == '' ? '起始日期' : data.startTime}}</view>
									</picker>
									<text style="margin: 0 20rpx;"> ~ </text>
									<picker mode="date" :value="date.endTime" @change="confirmDate($event,'endTime')" @cancel="confirmDate($event,'endTime')">
										<view class="uni-input">{{data.endTime == '' ? '结束日期' : data.endTime}}</view>
									</picker>
									<!-- <text>{{data.startTime == '' ? '起始日期' : data.startTime}}</text>
									<text style="margin: 0 20rpx;"> ~ </text>
									<text>{{data.endTime == '' ? '结束日期' : data.endTime}}</text> -->
								</view>
							</view>
						</view>
					</view>
					<view class="item-box">
						<view class="item-box-title u-flex-between" @click="openModel('select-procTime')">
							<view>处理时长</view>
							<view style="font-weight: 400;">
								<view class="item-content">{{data.procTime != '' ? procTimeName[data.procTime - 1] : '全部时长'}}</view>
							</view>
						</view>
					</view>
					<view class="item-box">
						<view class="item-box-title u-flex-between" @click="openModel('select-isSpare')">
							<view>是否备件</view>
							<view style="font-weight: 400;">
								<view class="item-content">{{data.isSpare != '' ? isSpareName[data.isSpare - 1] : '全部备件'}}</view>
							</view>
						</view>
					</view>
				</template>
			</sidebarpop>
			
			<!-- 分派客服-弹窗 -->
			<custompop
			ref="distribute_kefu"
			ptitle="分派客服"
			:isselect="true"
			:radioarr="JSON.stringify(kfselectlist)"
			@outputradio="selectKF"
			@saveclick="kfconfirm"
			@closeclick="closePop"
			>
			</custompop>
			<!-- 分派网点-弹窗 -->
			<custompop
			ref="distribute_branch"
			ptitle="分派网点"
			savetxt="保存"
			@saveclick="getdispathchWd"
			@closeclick="closePop"
			>
				<template slot="content">
					<view class="edit-form">
						<view class="u-flex form-item">
							<view class="">
								选择网点
							</view>
							<view class="u-flex">
								<view class="text-gray" @click="openModel('selsct_distribute_branch')">
									{{wd1}}
								</view>
							</view>
						</view>
						<view class="u-flex form-item">
							<view class="">
								网点员工
							</view>
							<view class="u-flex">
								<view class="text-gray" @click="openStaffModel()">
									{{kf1}}
								</view>
							</view>
						</view>
					</view>
				</template>
			</custompop>
			<!-- 选择分派网点/网点员工 -->
			<custompop
				ref="selsct_distribute_branch"
				ptitle="选择网点"
				:botshow="false"
				:isselect="true"
				:radioarr="JSON.stringify(wdkflist)"
				@outputradio="selectWd"
				@closeclick="closePop"
			>
			</custompop>
			<custompop
				ref="selsct_distribute_staff"
				ptitle="选择员工"
				:botshow="false"
				:isselect="true"
				:radioarr="JSON.stringify(columnData)"
				@outputradio="selectStaff"
				@closeclick="closePop"
			>
			</custompop>
			
			<!-- 批量操作列表弹窗 -->
			<custompop
			ref="batch-list"
			ptitle="批量操作"
			:isselect="true"
			:botshow="false"
			:radioarr="JSON.stringify(batchList)"
			@closeclick="closePop"
			@outputradio="triggerBatch">
			</custompop>
			<!-- 批量完成or取消-弹窗 -->
			<custompop
				ref="batch_over_or_cencel"
				:ptitle="batchType"
				@closeclick="closePop"
				@saveclick="batchOverOrCancelOrder"
			>
				<template slot="content">
					<view class="add-progress">
						<view style="text-align: left;" class="form-item">
							<view style="margin-bottom: 20rpx;">
								处理备注
							</view>
							<view class="remark">
								<u--textarea maxlength="300" count="true" height="400rpx" placeholder="请输入备注内容" v-model="batchSendList.remark"></u--textarea>
							</view>
						</view>
					</view>
				</template>
			</custompop>
			<!-- 批量修改服务级别-弹窗 -->
			<custompop
				ref="change_service_Level"
				ptitle="修改服务级别"
				:botshow="false"
				:isselect="true"
				:radioarr="JSON.stringify(levelList)"
				@outputradio="popChangeCall($event,1)"
				@closeclick="closePop"
			>
			</custompop>
			<!-- 批量修改受理方式-弹窗 -->
			<custompop
				ref="change_accept_mode"
				ptitle="修改受理方式"
				:botshow="false"
				:isselect="true"
				:radioarr="JSON.stringify(clfsList)"
				@outputradio="popChangeCall($event,2)"
				@closeclick="closePop"
			>
			</custompop>
			
			<!--处理时长-弹窗 -->
			<custompop
				ref="select-procTime"
				ptitle="处理时长"
				:botshow="false"
				:isselect="true"
				:radioarr="JSON.stringify(procTimeList)"
				@closeclick="closePop"
				@saveRadiovalClick="selectRadio">
			</custompop>
			<!--是否备件-弹窗 -->
			<custompop
				ref="select-isSpare"
				ptitle="是否备件"
				:botshow="false"
				:isselect="true"
				:radioarr="JSON.stringify(isSpareList)"
				@closeclick="closePop"
				@saveRadiovalClick="selectRadio">
			</custompop>
			
		</view>
	</view> 
</template>

<script>
	export default {
		data() {
			return {
				date:{
					startTime:'',
					endTime:''
				},
				tabIndex: 0,
				fpShow: false,
				show2: false,
				show3: false,
				count: '',
				fpkfshow2: false,
				tabs: [{
						name: '待受理',
						disabled: false,
						param: {
							serviceId: 1
						}
					},
					{
						name: '待分配网点',
						disabled: false,
						param: {
							unDistributeNet: 1
						}
					},
					{
						name: '新进展',
						disabled: false,
						param: {
							returnStatus: 1,
						}
					},
					{
						name: '待处理的',
						disabled: false,
						param: {
							workWaitEvent: 1,
						}
					},
					{
						name: '进展中',
						disabled: false,
						param: {
							isInProgress: 1
						}
					},
					{
						name: '待结单',
						disabled: false,
						param: {
							status: '待结单'
						}
					},
					{
						name: '已结单',
						disabled: false,
						param: {
							status: '待结算'
						}
					},
					{
						name: '已完成',
						disabled: false,
						param: {
							status: '已完成'
						}
					},
					{
						name: '已取消',
						disabled: false,
						param: {
							status: '已取消'
						}
					},
					{
						name: '全部工单',
						disabled: false,
						param: {
							serviceId: '',
							unDistributeNet: '',
							returnStatus: '',
							workWaitEvent: '',
							isInProgress: '',
							status: '',
						}
					},

				],
				procTimeList: [],	// 处理时间列表
				isSpareList: [],	// 是否备件列表
				procTimeName: ['12小时内','24小时内','36小时内','72小时内','超过72小时','超过120小时','超过168小时'],
				isSpareName: ['有备件','无备件','已审核','未审核'],
				showDate: false,	// 日期弹窗
				
				page: {
					pageNum: 1,
					pageSize: 20,
				},
				unDistributeNet: '1',
				custAccId: '',
				workList: [],
				newParams: [],
				keyword: '',
				show: false, //弹出层
				modulelist: [],
				brandlist: [],
				produslist: [],
				levellist: [],
				wdlist: [],
				kflist: [],
				acceptlist: [],
				data: {
					moduleId: '',			// 模块id
					status: '',				// ('待受理','处理中','待结单','待结算','已完成','待回访','已取消')
					unDistributeNet: '',	// 未分配网点工单【列表查询时传>0即可】
					returnStatus: '',		// 新进展，默认为0，> 0则存在新进展
					workWaitEvent: '',		// 待处理   的事件（如：需要审核的等）默认为0，没有处理事项
					isInProgress: '',		// 是否进展中【列表查询时传>0即可】
					proBrand: '',			// 品牌
					proType: '',			// 分类
					networkId: '',			// 网点id
					serviceLevel: '',		// 服务级别
					acceptServiceId: '',	// 受理客服id
					accept: '',				// 受理方式
					startTime: '',			// 开始时间
					endTime: '',			// 结束时间
					procTime: '',			// 处理时长，1：12小时，2：24小时，3：36小时，4：72小时，5：>72小时
					isSpare: '',			// 是否有备件 1：有备件，2：无备件，3：已审核，4：未审核
					serviceId: 1,			// 待受理的客服【列表查询时传>0即可】
				},
				check: [],
				kfselectlist: [],
				wdkflist: [],
				networkid: '',
				wdkflist2: [],
				networkEmpId: '',
				tagBgColor: '#fd7400',
				defaultBgColor: '#fff',
				tagColor: '#fff',
				defaultColor: 'grey',
				tagShow: false,
				activeIndex: '',
				columns: [],
				columnData: [],
				orangeBtn: {
					height: '50px !important',
					// boxShadow: '0 7px 40px rgba(235 151 43 / 30%)',
					background: '#fd7400',
					border: '0',
					boxShadow: '0px 7px 40px  rgba(253, 112, 8, 0.2)',
					borderRadius: '8px',
					fontSize: '18px',
					width: '100%'
				},
				currindex: -1,
				fpkfshow: false,
				kf1: '请选择网点后选择客服',
				wd1: '请选择网点',
				networkEmpId: '',
				
				kfSendList: {				// 分配客服数据
					ids: [],
					empId: '',
				},
				WdSendList: {				// 分配网点数据
					workIdList: [],
					networkId: '',
					networkEmpId: ''
				},
				batchSendList: {			// 批量完成或取消数据 
					status: '',				// status 传已完成或已取消
					workIds: [],
					remark: ''
				},
				batchType: '',				// 批量处理弹窗标题
				levelList: [],				// 服务级别
				clfsList: [],				// 受理方式
				batchUpdate: {				//
					type: '',
					acId: '',
					remark: '',
					workId: '',
				},			
				
				status: 'loading',			//上拉加载
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				
				sidebarList: [],			// 侧边栏数据
				popShow: false,				// 弹窗触发时为true
				popShowName: '',			// 弹窗名称
				isBatch: false,				// 是否批量
				isSelectAll: false,			// 是否全选
				selectCount: 0,				// 选中数量
				selectList: [],				// 选中的数据列表
				isBatchList: false,			// 是否显示批量处理列表
				batchList: [],				// 批量处理的弹窗数据
			}
		},
		onLoad(e) {
			this.custAccId = uni.getStorageSync('custAccid');
			this.acId = uni.getStorageSync('acId')
			if (e.typeName) {
				for (var i = 0; i < this.tabs.length; i++) {
					if (this.tabs[i].name === e.typeName) {
						this.tabIndex = i;
						this.newParams = {
							...this.tabs[i].param
						};
						break;
					}
				}
			}
			uni.showLoading({
				title: '加载中'
			})
			setTimeout(function() {
				uni.hideLoading();
			}, 500);
			this.getWorkList();
			this.getAllSearch();
			this.sidebarInit();
			
			this.procTimeList = [
				{ischeck: false,label: '12小时内',id:1},
				{ischeck: false,label: '24小时内',id:2},
				{ischeck: false,label: '36小时内',id:3},
				{ischeck: false,label: '72小时内',id:4},
				{ischeck: false,label: '超过72小时',id:5},
				{ischeck: false,label: '超过120小时',id:6},
				{ischeck: false,label: '超过168小时',id:7},
			]
			this.isSpareList = [
				{ischeck: false,label: '有备件',id:1},
				{ischeck: false,label: '无备件',id:2},
				{ischeck: false,label: '已审核',id:3},
				{ischeck: false,label: '未审核',id:4},
			]
		},
		// 下拉刷新
		onPullDownRefresh() {
			if(!this.popShow) {
				this.getPullRefresh();
			}
		},
		// 触底监听
		onReachBottom() {
			console.log('触底,判断数据余量,更新数据');
			console.log('列表分组总数:'+Math.ceil(this.count / 20),'当前列表:'+this.page.pageNum);
			if(this.page.pageNum < Math.ceil(this.count / 20)) {
				this.status = 'loading';
				this.page.pageNum++;
				this.getWorkList('refresh');
			}else {
				this.status = 'noMore';
			}
		},
		methods: {
			// 下拉刷新请求数据
			getPullRefresh(){
				console.clear()
				this.getWorkList();
			},
			
			// 获取
			async getWorkList(type) {
				this.status = 'loading';
				if(type != 'refresh') {
					this.workList = [];
				}
				const res = await uni.$api.work.getWrokList({
					...this.newParams,
					...this.page,
					isDelete: '0',
					custAccId: this.custAccId
				})
				console.log(res)
				if(type == 'refresh') {
					this.workList.push(...res.data);
				}else {
					this.page.pageNum = 1;
					this.workList = res.data
				}
				this.status = 'noMore';
				this.count = res.count
				uni.stopPullDownRefresh()
			},
			// 获取所有搜索项
			async getAllSearch() {
				const res = await uni.$api.work.getWorkmodule({
					custAccId: this.custAccId
				})
				this.modulelist = res.data
			
				const res2 = await uni.$api.work.getWorkBrand({
					custAccId: this.custAccId
				})
				this.brandlist = res2.data
				const res3 = await uni.$api.work.getWorkProdust({
					custAccId: this.custAccId
				})
				this.produslist = res3.data
				const res4 = await uni.$api.work.getWorkLevel({
					custAccId: this.custAccId
				})
				this.levellist = res4.data
				const res5 = await uni.$api.work.getWorkwd({
					custAccId: this.custAccId
				})
				this.wdlist = res5.data
				const res6 = await uni.$api.work.getWorkkf({
					custAccId: this.custAccId
				})
				this.kflist = res6.data
				const res7 = await uni.$api.work.getWorkAccept({
					custAccId: this.custAccId
				})
				this.acceptlist = res7.data
			},
			
			// 切换选项卡
			changeTab(item) {
				this.newParams = {
					...item.param,
				};
				// console.log(item)
				if (item === 1) {
					this.unDistributeNet = 1
				} else {
					this.unDistributeNet = 0
				}
				this.tabIndex = item.index;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
				this.getPullRefresh();
				this.getWorkList()
			},
			// 搜索
			goSearch() {
				let vagueSearch = this.keyword
				this.newParams = {
						...this.params,
						vagueSearch: vagueSearch
					},
				this.getWorkList()
			},
			// 跳转工单详情页
			goworkdetail(item) {
				uni.navigateTo({
					url: '/pagesA/pages/worklist/workdetail?workId=' + item.id
				})
			},
			
			/**
			 * 侧边栏相关
			 */
			// 初始化侧边栏弹窗数据
			sidebarInit() {
				const sidebarLable = ['工单类型','工单状态','工单品牌','产品类型','网点','级别','客服','受理方式'];
				const sidebarList = [this.modulelist,this.tabs,this.brandlist,this.produslist,this.wdlist,this.levellist,this.kflist,this.acceptlist];
				this.sidebarList = [];
				console.log(this.tabIndex,(this.tabs.length - 1))
				sidebarLable.forEach((val,index) => {
					this.sidebarList.push({
						selectEle: null,
						isShowList: false,
						title: val,
						isModelShow: index == 1 ? this.tabIndex == (this.tabs.length - 1) : true,
						data: this.handleSidebarData(sidebarList[index])
					});
				})
			},
			handleSidebarData(res = []) {
				let data = res;
				data.forEach(val => {
					val.ischeck = false;
					if(!val.title) {
						if(val.nameVal) {
							val.title = val.nameVal
						}
						if(val.name) {
							val.title = val.name
						}
					}
				})
				return data
			},
			// 清除数据
			clearSelect() {
				Object.keys(this.data).forEach(key => {
					this.data[key] = key != 'serviceId' ? '' : 1
				})
				this.newParams = {
					...this.data
				}
				this.getWorkList()
			},
			// 侧边栏模块标签点击
			radioClick(item,index,isRepeat) {
				console.log(item,index,isRepeat)
				switch (index) {
					case 0: // 工单类型
						this.data.moduleId = isRepeat ? '' : item.id
						break;
					case 1: // 工单状态
						this.data.serviceId = '';
						this.data.unDistributeNet = '';
						this.data.returnStatus = '';
						this.data.workWaitEvent = '';
						this.data.isInProgress = '';
						this.data.status = '';
						if(isRepeat) {
							break;
						}
						if (item.name === '待受理') {
							this.data.serviceId = 1
							break;
						} else if (item.name === '待分配') {
							this.data.unDistributeNet = 1
							break;
						} else if (item.name === '新进展') {
							this.data.returnStatus = 1
							break;
						} else if (item.name === '待处理的') {
							this.data.workWaitEvent = 1
							break;
						} else if (item.name === '进展中') {
							this.data.isInProgress = 1
							break;
						} else if (item.name === '待结单') {
							this.data.status = '待结单'
							break;
						} else if (item.name === '已结单') {
							this.data.status = '待结算'
							break;
						} else if (item.name === '已完成') {
							this.data.status = '已完成'
							break;
						} else if (item.name === '已取消') {
							this.data.status = '已取消'
							break;
						} else {
							break;
						}
					case 2:
						this.data.proBrand = isRepeat ? '' : item.title
						break;
					case 3:
						this.data.proType = isRepeat ? '' : item.title
						break;
					case 4:
						this.data.networkId = isRepeat ? '' : item.idVal;
						break;
					case 5:
						this.data.serviceLevel = isRepeat ? '' : item.title;
						break;
					case 6:
						this.data.acceptServiceId = isRepeat ? '' : item.idVal;
						break;
					case 7:
						this.data.accept = isRepeat ? '' : item.name;
						break;
				}
				this.newParams = {
					...this.data
				}
			},
			// 确认筛选
			saveSelect() {
				this.page.pageNum = 1;
				this.getWorkList();
				this.closePop();
			},
			// 打开侧边栏
			openSearch() {
				this.openModel('worklist-sidebar');
				this.sidebarInit();
			},
			// 日期选择回调
			confirmDate(e,name) {
				console.log('日期选择回调----',e,name)
				this.data[name] = e.detail.value ? e.detail.value : '';
				this.newParams = {
					...this.data
				}
			},
			// 单选弹窗回调
			selectRadio(val) {
				console.log('单选弹窗回调----',val);
				if(this.popShowName == 'select-procTime') {
					this.data.procTime = this.data.procTime != val.id ? val.id : '';
					this.procTimeList.forEach((res,index) => {
						if(res.id == val.id) {
							this.procTimeList[index].ischeck = false;
						}
					})
				}else if(this.popShowName == 'select-isSpare') {
					this.data.isSpare = this.data.isSpare != val.id ? val.id : '';
					this.isSpareList.forEach((res,index) => {
						if(res.id == val.id) {
							this.isSpareList[index].ischeck = false;
						}
					})
				}
				this.newParams = {
					...this.data
				}
			},
			
			/**
			 * 客服相关
			 */
			// 查询客服列表-分配客服
			async getKfList(ids) {
				this.kfSendList.ids = ids;
				const res = await uni.$api.work.getKfList({
					custAccId: this.custAccId
				})
				this.kfselectlist = res.data.map((val => {
					val.ischeck = false;
					val.label = val.title
					return val;
				}));
				console.log('查询客服', res)
				this.openModel('distribute_kefu')
			},
			// 分配客服-选择客服
			selectKF(item) {
				console.log('选择客服---',item)
				this.kfSendList.empId = item[0].id;
			},
			// 分配客服-确认
			async kfconfirm() {
				console.log('确认分配客服!')
				const res = await uni.$api.work.selectKf({
					custAccId: this.custAccId,
					acId: this.acId,
					...this.kfSendList
				})
				if (res.code == 0) {
					uni.showToast({
						title: '分派客服成功',
						icon: 'none'
					})
				}
				this.closePop();
				this.getPullRefresh();
			},
			
			/**
			 * 网点相关
			 */
			// 分派网点
			getWdList(ids) {
				this.WdSendList.workIdList = ids
				this.getWdSelect()
				this.openModel('distribute_branch')
			},
			// 获取网点列表
			async getWdSelect() {
				// 这个是登录员工id
				let empId = uni.getStorageSync('empId')
				const res = await uni.$api.network.getWdSelect(this.custAccId, this.acId, empId, {
					workId: this.WdSendList.workIdList[0]
				})
				if(res.code == 0) {
					this.wdkflist = res.data.serviceNetwork.map((res => {
						res.ischeck = false;
						res.label = res.name
						return res;
					}));
				}
				console.log('获取网点列表', this.wdkflist)
			},
			// 选择网点
			selectWd(item) {
				console.log(item);
				// 传递网点id获取该网点员工并打开网点员工弹窗
				this.getWdSelectKf(item[0].id)
				this.wd1 = item[0].label;
				this.openModel('distribute_branch');
			},
			// 获取网点员工列表数据
			async getWdSelectKf(id) {
				this.WdSendList.networkId = id
				let empId = uni.getStorageSync('empId')
				const res = await uni.$api.network.getWdSelectKf(this.custAccId, this.acId, empId, {
					workId: this.WdSendList.workIdList[0],
					networkId: id
				})
				console.log('网点员工-----',res.data);
				if (res.code == 0) {
					this.columnData = res.data.map((res => {
						res.ischeck = false;
						res.label = res.name
						return res;
					}));
				} 
			},
			// 打开网点员工弹窗
			openStaffModel() {
				if(this.WdSendList.networkId != '') {
					this.openModel('selsct_distribute_staff')
				}else {
					uni.showToast({
						title: '请先选择网点',
						icon: 'none'
					})
				}
			},
			// 选择网点员工
			selectStaff(item) {
				console.log(item)
				this.kf1 = item[0].label
				this.WdSendList.networkEmpId = item[0].id;
				this.openModel('distribute_branch');
			},
			// 确认分派网点
			async getdispathchWd() {
				let isSend = true;
				Object.keys(this.WdSendList).forEach(key => {
					if(this.WdSendList[key] == '') {
						isSend = false;
					}
				})
				if(!isSend) {
					uni.showToast({
						title: '数据未完整提交！',
						icon: 'none'
					})
					return
				}
				let empId = uni.getStorageSync('empId');
				const res = await uni.$api.network.getdispathchWd(this.custAccId, this.acId, empId, {
					...this.WdSendList
				})
				if (res.code == 0) {
					// console.log(res, '确认')
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
				this.closePop();
				this.getPullRefresh();
			},
			
			/**
			 * 批量操作-初始化
			 */
			batchInit() {
				this.batchList = [
					{ischeck: false,label:'批量派单（网点）'},
					{ischeck: false,label:'批量转单（客服）'},
					{ischeck: false,label:'批量完成工单'},
					{ischeck: false,label:'批量取消工单'},
					{ischeck: false,label:'批量修改受理方式'},
					{ischeck: false,label:'批量修改服务级别'},
				]
			},
			// 批量操作-触发
			changeBatch(bool) {
				this.isBatch = bool;
				this.batchSelectAll(false)
				this.batchInit();
			},
			// 批量操作-全选
			batchSelectAll(bool) {
				this.isSelectAll = bool;
				this.selectCount = this.isSelectAll ? this.count : 0;
				this.selectList = this.isSelectAll ? this.workList.map(res => {return res.id}) : [];
			},
			// 批量操作-单选
			selectCheck(e) {
				// console.log(e)
				this.selectCount = e.detail.value.length;
				this.selectList = e.detail.value;
				console.log("工单id列表----",this.selectList)
			},
			// 批量操作-选项列表
			changeBatchList() {
				if(this.selectCount > 0) {
					this.batchInit();
					this.openModel('batch-list');
				}else {
					uni.showToast({
						title: '请选择工单',
						icon: 'none'
					})
				}
			},
			// 批量操作-触发批量操作
			triggerBatch(obj) {
				switch(obj[0].label) {
					case '批量派单（网点）': 
						this.getWdList(this.selectList);
					break
					case '批量转单（客服）': 
						this.getKfList(this.selectList);
					break
					case '批量完成工单': 
						this.handleBatch(true);
					break
					case '批量取消工单': 
						this.handleBatch(false);
					break
					case '批量修改受理方式': 
						this.getFindclfs();
						this.batchUpdate.workId = this.selectList.join(",")
						this.openModel('change_accept_mode')
					break
					case '批量修改服务级别': 
						this.getWorkLevel();
						this.batchUpdate.workId = this.selectList.join(",")
						this.openModel('change_service_Level')
					break
				}
				this.changeBatch(false);
				console.log('当前触发的批量操作----',obj[0].label);
			},
			
			// 批量完成或取消工单
			handleBatch(bool) {
				this.batchType = bool ? '批量完成工单' : '批量取消工单';
				this.batchSendList.status = bool ? '已完成' : '已取消';
				this.batchSendList.workIds = this.selectList;
				this.openModel('batch_over_or_cencel');
			},
			async batchOverOrCancelOrder() {
				const res = await uni.$api.network.batchOverOrCancelOrder({
					custAccId: this.custAccId,
					acId: this.acId,
					...this.batchSendList
				})
				if(res.code == 0) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
				this.closePop();
				this.getPullRefresh();
			},
			
			// 服务级别
			async getWorkLevel() {
				const res = await uni.$api.work.getWorkLevel({
					custAccId: this.custAccId
				})
				console.log('查询服务级别---', res)
				this.levelList = res.data.map(res => {
					res.ischeck = false;
					res.label = res.title;
					return res;
				})
			},
			// 受理方式
			async getFindclfs() {
				const res = await uni.$api.work.acceptance({
					custAccId: this.custAccId
				})
				console.log('查询受理方式---', res)
				this.clfsList = res.data.map(res => {
					res.ischeck = false;
					res.label = res.title;
					return res;
				})
			},
			// 服务级别or受理方式选中
			popChangeCall(item,index) {
				console.log(item)
				this.batchUpdate.type = index;
				this.batchUpdate.acId = this.acId;
				if(index == 1) {
					this.batchUpdate.serviceLevel = item[0].label
				}else {
					this.batchUpdate.accept = item[0].label
				}
				this.closePop();
				this.getPullRefresh();
				this.batchUpdateOrderInfo();
			},
			async batchUpdateOrderInfo() {
				const res = await uni.$api.network.batchUpdateOrderInfo({
					...this.batchUpdate,
				})
				if(res.code == 0) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				} 
			},
			
			// 新开弹窗
			openModel(ref) {
				if(this.$refs[ref]) {
					this.popShow = true;
					this.popShowName = ref;
					this.$refs[ref].pupshow = true;
				}
			},
			// 关闭弹窗
			closePop() {
				// 释放
				if(this.popShowName == 'distribute_kefu') {
					Object.keys(this.kfSendList).forEach(key => {
						this.kfSendList[key] = null
					})
				}else if(this.popShowName == 'distribute_branch') {
					Object.keys(this.WdSendList).forEach(key => {
						this.WdSendList[key] = null
					})
				}else if(this.popShowName == 'batch_over_or_cencel') {
					Object.keys(this.batchSendList).forEach(key => {
						this.batchSendList[key] = null
					})
				}
				
				this.popShowName = '';
				this.popShow = false;
			},
		}
	}
</script>

<style lang="scss">
	
	.isActive2 {
		color: #fd7400;

	}

	.u-page__tag-item {
		// width: calc(33.33% - 13px);
		// margin-bottom: 13px;
		// margin-right: 13px;
		margin: 12rpx;
	}

	/deep/.u-modal__title {
		padding-top: 22px;
		font-size: 18px;
		color: #000;
		font-weight: 400;
	}

	/deep/.u-modal__content {
		padding: 22px !important;
		justify-content: start;
	}

	/deep/.u-radio {
		border-bottom: solid 1px #f5f5f5;
		padding: 11px 0;
	}

	/deep/.u-popup__content {
		// border-top-left-radius: 10px;
		// border-bottom-left-radius: 10px;
	}

	/deep/.u-tag--medium {
		display: flex;
		justify-content: center;
		height: 37px;
		word-wrap: break-word;
		overflow: hidden;
		background-color: #e5e5e5;
		border: 0;
	}

	.worklist-content {
		height: 100%;
		background-color: $uni-bg-color-grey;

		&.hidden {
			overflow: hidden;
		}

		.bm-list {
			position: relative;
			padding: 0 30rpx 70px 30rpx;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.icon {
					display: none;
					background: #fd7400;
					border-radius: 50%;
				}

				&.isActive2 {
					.icon {
						display: block;
					}
				}
			}

			.btns {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				padding: 10px;
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
		
		.pop-content-list {
			
			.item-box {
				padding: 20rpx;
				margin: 10rpx 10rpx 20rpx;
				border-radius: 10px;
				background: rgb(255,255,255);
			}
			.item-box-title {
				padding: 16rpx;
				font-size: 13px;
				font-weight: 700;
			}
			.item-box-btnbox {
				// display: flex;
				// flex-wrap: wrap;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-gap: 20rpx;
				justify-items: start;
				padding: 20rpx;
				transition: all .5s;
				
				.item-box-btn {
					width: 140rpx;
					// text-overflow: ellipsis;
					// white-space: nowrap;
					// overflow: hidden;
				}
			}
			
			.item-content {
				display: flex;
				color: gray;
			}
			
			.item-show {
				display: flex;
				justify-content: center;
			}
		}
		
		.popup {
			.popup-content {
				margin-top: 0;
				float: right;
				width: 331px;
				// padding: 0 16px;
				box-sizing: border-box;
				background: #fff;
				border-top-left-radius: 10px;
				border-bottom-left-radius: 10px;
				position: relative;
				height: 100vh;
				overflow: auto;
				padding-bottom: 110px;

				.top {
					// line-height: 150%;
					// padding-top: 13px;
					// padding-bottom: 9px;
					padding: 16rpx 20rpx;
					// border-bottom: solid 1px #e5e5e5;
				}
				
				.content {
					height: auto;
					overflow: auto;
					padding: 10rpx 20rpx;
					background: #f5f5f5;
				}

				.item-box {
					background: rgb(255,255,255);
					padding: 10rpx;
					margin: 10rpx 10rpx 20rpx;
					border-radius: 10px;
					
					.item-title {
						padding: 16rpx;
						font-size: 13px;
						font-weight: 700;
					}

					.item {
						display: flex;
						flex-wrap: wrap;
						// padding-top: 9px;
						// padding-bottom: 5px;
						// justify-content: space-between;

					}
				}

				.foot {
					padding: 22px 0;
					border-top: solid 1px #e5e5e5;
					position: fixed;
					width: 331px;
					bottom: 0;
					background-color: $uni-bg-color;
					
					.left,
					.right {
						width: 140px;
						height: 35px;
						font-size: 14px;
						line-height: 35px;
						text-align: center;
						margin: 0 26rpx;
					}
				}
			}
		}

		.tabs {
			background-color: #fff;
			font-size: 28rpx;
		}

		.nav-status {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 14px;
			padding: 0 20rpx;
			background-color: #f5f5f5;
			.count {
				display: flex;
			}
			.batch {
				display: flex;
			}
			.icon-btn {
				display: flex;
				padding: 0 10rpx;
			}
		}

		.card-list {
			background: $uni-bg-color-grey;
			padding: 0 20rpx;

			.card {
				padding: 28rpx;
				background: #fff;
				border-radius: 10rpx;
				margin-bottom: 28rpx;

				.top {
					border-bottom: solid 1px #f5f5f5;
					padding-bottom: 10px;

					.left {
						.text-info {
							font-size: 28rpx;
						}
					}
				}

				.center {
					padding-top: 18rpx;
					padding-bottom: 18rpx;

					.title {

						.title-left {
							font-size: 28rpx;
						}

						.title-right {
							font-size: 14px;
						}
					}

					.text {
						font-size: 28rpx;
						color: gray;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						margin: 4rpx 0;
					}
				}
			}

			.down {
				border-top: solid 1px #f5f5f5;
				padding-top: 22rpx;
			}

		}

		.popup-v {
			// background: #fff;
			// height: calc(100vh - env(safe-area-inset-bottom));
			height: auto;
			max-height: 80vh;

			.bm-list {
				.icon {
					display: none;
					background: #fd7400;
					border-radius: 50%;
				}

				&.isActive {
					.icon {
						display: block;
					}
				}
			}

			.footer {
				padding: 30rpx;
				width: 100%;
				justify-content: space-between;
				// position: fixed;
				// bottom: 0;
				background-color: #fff;
				margin-top: 30rpx;
				align-items: center;

				.cancel {
					width: 400rpx;
					text-align: center;
					display: flex;
					justify-content: center;
					font-size: 36rpx;
				}

				.save {
					width: 100%;
				}
			}

			.popup-header {
				padding: 30rpx 60rpx;
				display: flex;
				justify-content: center;

				.close {
					width:
						40rpx;
				}

				.title {
					font-size: 36rpx;
					font-weight: 700;
					width: 100%;
					text-align: center;
				}
			}

			

			.popup-c {
				max-height: 100%;
				overflow: auto;

				.popup-content {
					padding: 0 60rpx 60rpx 60rpx;

					.title {
						margin-bottom: 30rpx;
						border-left: 6rpx solid #fd7400;
						padding: 0 10rpx;

					}

					.tagA {
						text-align: center;
						padding: 20rpx 0;
						margin-bottom: 30rpx;
						border-radius: 8rpx;
						background-color: #f5f5f5;
					}
				}

				.footer {
					padding: 60rpx;
					width: 100%;
					justify-content: space-between;
					position: fixed;
					bottom: 0;
					background-color: #fff;
					margin-top: 60rpx
				}
			}
		}

	}
	
	.edit-form {
		padding: 0 60rpx 0 60rpx;
		.form-item {
			background-color: #fff;
			justify-content: space-between;
			padding: 30rpx;
			margin-bottom: 30rpx;
			text-align: right;
			border: 1px solid #f5f5f5;
			border-radius: 8rpx;
	
			.icon {
				display: none;
				background: #fd7400;
				border-radius: 50%;
			}
		}
	}
	
	// 底部批量操作
	.batch-bars {
		position: fixed;
		bottom: -1px;
		width: 100%;
		height: 120rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		background: #fff;
		border-top: 1px solid #d8d8d8;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		transition: all .4s;
		
		.batch-bars-box {
			height: 100rpx;
			.batch-bars-btn {
				background: #fd7400;
				box-shadow: 0px 7px 40px rgba(253, 112, 8, 0.2);
				border-radius: 6rpx;
				padding: 10rpx 20rpx;
				font-size: 36rpx;
				color: #fff;
				text-align: center;
			}
		}
		.batch-bars-list {
			
		}
	}
	
	.add-progress {
		padding: 0 20rpx;
		
		.form-item {
			background-color: #fff;
			justify-content: space-between;
			padding: 30rpx;
			margin-bottom: 30rpx;
			text-align: right;
			border: 1px solid #f1f1f1;
			border-radius: 8rpx;
	
			.remark {
				flex: .9;
				text-align: left;
			}
		}
	}
</style>